<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
		<script type="application/javascript" src="../../js/flexible.debug.js"></script>
		<script type="application/javascript" src="../../js/flexible_css.debug.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="../../js/querystring.min.js"></script>
		<script type="text/javascript" src="../..//js/cfg.js"></script>
		<link rel="stylesheet" href="../../css/layout.css">
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="tabnav backgroundcolorf8f8f8">
				<van-tabs @click="onClick" v-model="active" class="pad-t15">
					<van-tab title="全部">
						<div class="all">
							<div v-if="orderlist==''" class="content displayTable">
								<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
								<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
							</div>
							<div v-else-if="orderlist">
								<div class="mg-b20 backgroundcolorfff" v-for="item in orderlist">
									<div class="borderbottomf0 content">
										<div class="displayFlex">
											<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
												重庆特产</p>
											<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
										</div>
										<div class="displayFlex mg-t32">
											<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
											<div class="mg-l43">
												<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
												<p class="mg-t30 displayFlex">
													<span class="colorf72929 font36 left flex1">
														<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
													</span>
													<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
												</p>
												<p class="font26 textRight color333 letterSpacing1 mg-t50">共
													{{item.order_number}}
													件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
											</div>
										</div>
									</div>
									<div class="tollBtn textRight content">
										<!-- 待付款 -->
										<div v-if="item.order_status==0">
											<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
											 @click="changestatus(item.id,'5')">取消订单</span>
											<span class="width146 height56 lineheight56 textCenter colorfff letterSpacing1 font24 backgroundcolorf72929 radious6 mg-l20 displayInline"
											 @click="goLink('../pay.html?orderid='+item.id+'&orderType='+item.order_type+'&amount='+item.order_amount+'&orderno='+item.order_no)">立即结算</span>
										</div>
										<!-- 代发货 -->
										<div v-if="item.order_status==1">
											<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
											 @click="tips(item.id)">提醒发货</span>
										</div>
										<!-- 待收货 -->
										<div v-if="item.order_status==2">
											<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
											 @click="checkwuliu(item.id)">查看物流</span>
											<span class="width146 height56 lineheight56 textCenter colorfff letterSpacing1 font24 backgroundcolorf72929 radious6 mg-l20 displayInline"
											 @click="changestatus(item.id,'4')">确认收货</span>
										</div>
										<!-- 待评价 -->
										<!-- 交易完成 -->
										<div v-if="item.order_status==4">
											<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
											 @click="delet(item.id,'6')">删除订单</span>
										</div>
										<!-- 已取消 -->
										<div v-if="item.order_status==5">
											<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
											 @click="delet(item.id,'6')">删除订单</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</van-tab>
					<van-tab title="待付款">
						<div v-if="zerolist==''" class="content displayTable">
							<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
							<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
						</div>
						<div v-else-if="zerolist!=''">
							<div class="mg-b20 backgroundcolorfff" v-for="item in zerolist">
								<div class="borderbottomf0 content">
									<div class="displayFlex">
										<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
											重庆特产</p>
										<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
									</div>
									<div class="displayFlex mg-t32">
										<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
										<div class="mg-l43">
											<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
											<p class="mg-t30 displayFlex">
												<span class="colorf72929 font36 left flex1">
													<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
												</span>
												<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
											</p>
											<p class="font26 textRight color333 letterSpacing1 mg-t50">共
												{{item.order_number}}
												件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
										</div>
									</div>
								</div>
								<div class="tollBtn textRight content">
									<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
									 @click="changestatus(item.id,'5')">取消订单</span>
									<span class="width146 height56 lineheight56 textCenter colorfff letterSpacing1 font24 backgroundcolorf72929 radious6 mg-l20 displayInline"
									 @click="goLink('../buy.html?orderid='+item.id+'&orderType='+item.order_type+'&amount='+item.order_amount+'&orderno='+item.order_no)">立即结算</span>
								</div>
							</div>
						</div>
					</van-tab>
					<van-tab title="待发货">
						<div v-if="onelist==''" class="content displayTable">
							<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
							<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
						</div>
						<div v-else-if="onelist!=''">
							<div class="mg-b20 backgroundcolorfff" v-for="item in onelist">
								<div class="borderbottomf0 content">
									<div class="displayFlex">
										<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
											重庆特产</p>
										<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
									</div>
									<div class="displayFlex mg-t32">
										<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
										<div class="mg-l43">
											<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
											<p class="mg-t30 displayFlex">
												<span class="colorf72929 font36 left flex1">
													<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
												</span>
												<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
											</p>
											<p class="font26 textRight color333 letterSpacing1 mg-t50">共
												{{item.order_number}}
												件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
										</div>
									</div>
								</div>
								<div class="tollBtn textRight content">
									<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
									 @click="tips(item.id)">提醒发货</span>
								</div>
							</div>
						</div>
					</van-tab>
					<van-tab title="待收货">
						<div v-if="twolist==''" class="content displayTable">
							<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
							<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
						</div>
						<div v-else-if="twolist!=''">
							<div class="mg-b20 backgroundcolorfff" v-for="item in twolist">
								<div class="borderbottomf0 content">
									<div class="displayFlex">
										<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
											重庆特产</p>
										<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
									</div>
									<div class="displayFlex mg-t32">
										<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
										<div class="mg-l43">
											<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
											<p class="mg-t30 displayFlex">
												<span class="colorf72929 font36 left flex1">
													<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
												</span>
												<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
											</p>
											<p class="font26 textRight color333 letterSpacing1 mg-t50">共
												{{item.order_number}}
												件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
										</div>
									</div>
								</div>
								<div class="tollBtn textRight content">
									<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
									 @click="checkwuliu(item.id)">查看物流</span>
									<span class="width146 height56 lineheight56 textCenter colorfff letterSpacing1 font24 backgroundcolorf72929 radious6 mg-l20 displayInline"
									 @click="changestatus(item.id,'4')">确认收货</span>
								</div>
							</div>
						</div>
					</van-tab>
					<van-tab title="交易完成">
						<div v-if="fourlist==''" class="content displayTable">
							<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
							<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
						</div>
						<div v-else-if="fourlist!=''">
							<div class="mg-b20 backgroundcolorfff" v-for="item in fourlist">
								<div class="borderbottomf0 content">
									<div class="displayFlex">
										<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
											重庆特产</p>
										<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
									</div>
									<div class="displayFlex mg-t32">
										<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
										<div class="mg-l43">
											<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
											<p class="mg-t30 displayFlex">
												<span class="colorf72929 font36 left flex1">
													<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
												</span>
												<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
											</p>
											<p class="font26 textRight color333 letterSpacing1 mg-t50">共
												{{item.order_number}}
												件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
										</div>
									</div>
								</div>
								<div class="tollBtn textRight content">
									<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
									 @click="delet(item.id,'4')">删除订单</span>
									<!-- <span class="width146 height56 lineheight56 textCenter colorfff letterSpacing1 font24 backgroundcolorf72929 radious6 mg-l20 displayInline"
									 @click="goLink('../buy.html?orderid='+orderid)">立即结算</span> -->
								</div>
							</div>
						</div>
					</van-tab>
					<van-tab title="已取消">
						<div v-if="fivelist==''" class="content displayTable">
							<p class="width478 height370 mg-t188 displayTable"><img src="../../img/ordernull.png" alt="空" class="width100p height100p"></p>
							<p class="color999 textCenter font26 mg-t22">您还没有相关订单~</p>
						</div>
						<div v-else-if="fivelist!=''">
							<div class="mg-b20 backgroundcolorfff" v-for="item in fivelist">
								<div class="borderbottomf0 content">
									<div class="displayFlex">
										<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
											重庆特产</p>
										<p class="right colorf72929 font28 letterSpacing1">{{item.order_status|status}}</p>
									</div>
									<div class="displayFlex mg-t32">
										<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
										<div class="mg-l43">
											<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
											<p class="mg-t30 displayFlex">
												<span class="colorf72929 font36 left flex1">
													<em class="displayblock">¥{{item.order_price|formatFixed}}</em> <em class="displayblock font20" v-if="item.order_type==1">还差{{item.cott}}人拼团成功</em>
												</span>
												<span class="right mg-t5"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></span>
											</p>
											<p class="font26 textRight color333 letterSpacing1 mg-t50">共
												{{item.order_number}}
												件商品 实付款：¥{{item.order_amount|formatFixed}}</p>
										</div>
									</div>
								</div>
								<div class="tollBtn textRight content">
									<span class="width146 height56 lineheight56 textCenter color333 letterSpacing1 font24 borderd1 radious6 displayInline"
									 @click="delet(item.id,'5')">删除订单</span>
								</div>
							</div>
						</div>
					</van-tab>
				</van-tabs>
			</div>
			<div class="wuliu">
				<van-dialog v-model="show" confirm-button-text="确定" lock-scroll>
					<p class="wuliutitle height88 lineHeight88 textLeft displayFlex font30 color333 letterSpacing1 pad-l30" @click="close()">物流信息</p>
					<div class="wuliucontent displayFlex pad-30">
						<!-- <p class="width82 height82 radious50"><img src="" alt="" class="width100p"></p> -->
						<p class="mg-l20 font28 color333 flex1">
							<span class="displayblock">{{wuliu.express_company}}</span>
							<!-- <span class="displayblock mg-t27">官方电话：95338</span> -->
						</p>
					</div>
					<div class="font28 color333 letterSpacing1 textLeft pad-lr30 mg-b30">{{wuliu.express_company}}：{{wuliu.express_no}}</div>
				</van-dialog>
			</div>
			<van-loading size="24px" vertical v-show="lodaing">加载中...</van-loading>
		</div>
		<script>
			var vant = window.vant;
			var qsd = querystring.parse();
			var order_type = qsd.orderStatus || qsd.ordertype || '6';
			var cfg = new AppCfg().init({
				isDebug: false,
			});
			Vue.use(vant);
			new Vue({
				el: '#app',
				data: {
					orderNumber: 1,
					value: 1,
					checked: true,
					active: order_type,
					orderlist: [],
					zerolist:[],
					onelist:[],
					twolist:[],
					threelist:[],
					fourlist:[],
					fivelist:[],
					wuliu: '',
					show: false,
					lodaing:false
				},
				created: function() {
					this.checkorder()
				},
				methods: {
					tips:function(){
						vant.Toast('我们已收到你的提醒，请耐心等候！')
					},
					checkorder: function() {
						var that = this;
						var parm = {
							order_status: 0,
							pageNo: 1,
							pageSize: 10,
						}
						cfg.majaxAction("queryOrderPage", parm, function(res) {
							console.log(res)
							if (res.data.records.length > 0) {
								that.orderlist = res.data.records;
								for(var i=0;i<res.data.records.length;i++){
									if(res.data.records[i].order_status==0){
										that.zerolist.push(res.data.records[i]);
									}else if(res.data.records[i].order_status==1){
										that.onelist.push(res.data.records[i]);
									}else if(res.data.records[i].order_status==2){
										that.twolist.push(res.data.records[i]);
									}else if(res.data.records[i].order_status==3){
										that.threelist.push(res.data.records[i]);
									}else if(res.data.records[i].order_status==4){
										that.fourlist.push(res.data.records[i]);
									}else if(res.data.records[i].order_status==5){
										that.fivelist.push(res.data.records[i]);
									}
								}
							}else {
								that.orderlist = [];
							}
						});
					},
					onClick(index, title) {
						// this.$toast(title);/
					},
					checkwuliu: function(val) {
						var that = this;
						var param = {
							orderId: val
						}
						cfg.majaxAction("queryOrderById", param, function(res) {
							if (res.data) {
								that.wuliu = res.data;
								that.show = !that.show;
							} else {
								vant.Toast('暂无物流信息')
							}
						});
					},
					close: function() {
						this.show = !this.show;
					},
					changestatus:function(id,status){
						var that=this;
						var parm = {
							orderId:id,
							order_status:status,
						}
						cfg.majaxAction("modifyOrderStatus", parm, function(res) {
							window.location.href='order.html?orderStatus='+status+'&orderid='+id;
							console.log(res.data);
							that.checkorder();
							that.active=status
							alert(status);
						});
					},
					// 确认收货
					checkorder_type: function(val) {
						this.active = val;
					},
					goLink: function(val) {
						window.location.href = val;
					},
					delet: function(id,status) {
						var that = this;
						vant.Dialog.confirm({
							message: '确定删除吗？'
						}).then((e) => {
							var param = {
								orderId: id
							}
							cfg.majaxAction("removeOrderById", param, function(res) {
								// setTimeout(that.lodaing=!that.lodaing)
								that.lodaing=!that.lodaing;
								window.location.href='order.html?orderStatus='+status+'&orderid='+id;
// 								that.active=status;
// 								that.checkorder();
// 								alert(status)
							});
							alert(e)
						}, (e) => {
							alert(e)
						});
					},
					goaddress: function() {
						window.location.href = "address.html";
					},
					changeorder(value) {
						this.orderNumber = value;
						this.total = value * this.price;
					},
					goPay: function(val) {
						if (this.checked) {
							window.location.href = "pay.html?amount=" + val;
						} else {
							vant.Toast('你还没选择商品')
						}
					}
				},
				filters: {
					formatFixed: function(val) {
						return parseFloat(val).toFixed(2)
					},
					status: function(val) {
						var status = {
							"0": "待付款",
							"1": "待发货",
							"2": "待收货",
							"3": "待评价",
							"4": "交易完成",
							"5": "已取消"
						};
						return status[val];
					}
				}
			})
		</script>
	</body>
</html>
